<template>
	<view class="page" :style="{'height':h+'px'}">
		<view class="bg"></view>
		<c-nav-bar title="停车缴费" bgColor="transparent" leftIconColor="#ffffff" :titleStyle="{'fontSize': '36rpx','fontWeight': 'bold','color': '#ffffff'}"></c-nav-bar>
		<view class="addr_info" :style="{'margin-top':(mt+18)+'px'}">
			<text>待缴费</text>
			<text>{{item.numberplate||''}}</text>
		</view>
		<view class="car_info">
			<view class="t_licence">
				<view class="tl_left">
					<view class="ai_top">
						<image src="https://i.ringzle.com/file/20231116/edd1a58bfc004262b33b78f3007be247.png"></image>
						<text>{{item.nameIsland||''}}-{{item.parkadeName||''}}</text>
					</view>
					<view class="ai_bottom">
						<image src="https://i.ringzle.com/file/20231116/9fd38a5d8031478dbc9bd170459fdfda.png"></image>
						<!-- <text>{{item.locationIsland}}</text> -->
						<text>{{item.coordinate||''}}</text>
					</view>
				</view>
				<view class="tl_right">￥<span>{{item.paymentAmount||''}}</span></view>
			</view>
			<view class="t_items">
				<view class="ti_item">
					<text>进场时间段</text>
					<text>{{item.inOutTime||''}}</text>
				</view>
				<view class="ti_item">
					<text>停车时间</text>
					<!-- <text>{{item.parkingDuration}}</text> -->
					<text>{{item.parkTime||''}}</text>
				</view>
				<view class="ti_item">
					<text>预约手机号</text>
					<text>{{item.reservationPhone||''}}</text>
				</view>
			</view>
		</view>
		<view class="bottom">
			<view class="btn" @tap="surePay">
				去支付
			</view>
		</view>
		<WechatPay ref="wxPay" @confirmPay="toPay"></WechatPay>
	</view>
</template>

<script>
	import WechatPay from '@/compoments/wechatPay/index.vue'
	export default {
		components:{WechatPay},
		data() {
			return {
				h: uni.getSystemInfoSync().windowHeight - 90,
				mt: uni.getSystemInfoSync().statusBarHeight + 44,
				titleStyle: {
					fontSize: '36rpx',
					fontWeight: "bold",
					color: "#ffffff"
				},
				licence:'',
				item:null,
			}
		},
		onLoad(option) {
			if(option.licence){
				this.getDetails(option.licence);
			}
		},
		methods: {
			getDetails(licence){
				this.$api.get('/travel/wisdom/ParkinPayment/whole?numberplate='+licence+'&openId='+JSON.parse(uni.getStorageSync('userInfo')).openId).then(res=>{
					if(res.data.code===0){
						this.item = res.data.data;
						if(new Date(this.item.paymentTime).Format('yyyy-MM-dd')==new Date(this.item.createOrderTime).Format('yyyy-MM-dd')){
							this.item.inOutTime = new Date(this.item.createOrderTime).Format('yyyy-MM-dd')+' '+new Date(this.item.createOrderTime).Format('hh:mm')+'-'+new Date(this.item.paymentTime).Format('hh:mm')
						}else{
							this.item.inOutTime = new Date(this.item.createOrderTime).Format('yyyy-MM-dd hh:mm')+'-'+new Date(this.item.paymentTime).Format('yyyy-MM-dd hh:mm');
						}
						
						let diff = Date.parse(new Date(this.item.paymentTime))-Date.parse(new Date(this.item.createOrderTime));
						let diffM = Math.ceil(diff/1000/60);
						let h = Math.floor(diffM/60);
						let m = Math.ceil(diffM%60);
						this.item.parkTime = h+'小时'+m+'分钟'
					}else this.$showModal(res.data.msg);
				})
			},
			surePay(){
				this.$refs.wxPay.payShow = true;
			},
			toPay(){
				this.$api.post('/order/icbc/createOrder',{
					orderCode:this.item.orderCode,
					tradeType:'JSAPI',
					openId:JSON.parse(uni.getStorageSync('userInfo')).openId
				},false).then(res=>{
					if(res.statusCode==200&&res.data!=null){
						this.$refs.wxPay.payShow = false;
						this.$wxPay(res.data).then(result=>{
							this.$showToast('支付成功');
							setTimeout(()=>{
								uni.navigateBack();
							},1500)
						})
					}
				})
			}
		}
	}
</script>

<style scoped lang="less">
	.page{
		background: #F5F8FA;
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		.bg{
			width: 100%;
			height: 435rpx;
			background: linear-gradient(117deg,#0079D9,#45B6DC);
			position: absolute;
			top: 0;
			left: 0;
			z-index: 0;
		}
		
		.addr_info{
			width: calc(100% - 48rpx);
			padding: 0 24rpx 25rpx;
			box-sizing: border-box;
			position: relative;
			background: transparent;
			display: flex;
			flex-direction: column;
			text{
				color: #FFFFFF;
				&:first-child{
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
				}
				&:last-child{
					font-size: 40rpx;
					font-family: PingFang SC-Heavy, PingFang SC;
					font-weight: 800;
					margin-top: 10rpx;
				}
			}
		}
		
		.car_info,.pay_detail{
			width: calc(100% - 48rpx);
			padding: 20rpx 24rpx 30rpx;
			background: #fff;
			border-radius: 16rpx;
			box-sizing: border-box;
			position: relative;
		}
		.car_info{
			.t_licence{
				display: flex;
				align-items: center;
				justify-content: space-between;
				
				.tl_left{
					&>view{
						display: flex;
						align-items: center;
					}
					.ai_top{
						image{
							width: 30rpx;
							height: 30rpx;
						}
						text{
							font-size: 36rpx;
							font-family: PingFang SC-Bold, PingFang SC;
							font-weight: bold;
							color: #2E2424;
							margin-left: 10rpx;
						}
					}
					.ai_bottom{
						margin-top: 11rpx;
						padding-left: 5rpx;
						image{
							width: 20rpx;
							height: 24rpx;
						}
						text{
							font-size: 24rpx;
							font-family: PingFang SC-Regular, PingFang SC;
							font-weight: 400;
							color: #2E2424;
							margin-left: 10rpx;
						}
					}
				}
				.tl_right{
					display: flex;
					align-items: center;
					font-size: 31rpx;
					font-family: PingFangSC-Regular-, PingFangSC-Regular;
					font-weight: normal;
					color: #FF4141;
					span{
						font-size: 51rpx;
						font-family: Arial-BoldMT-, Arial-BoldMT;
						font-weight: bold;
					}
				}
			}
			.t_items{
				margin-top: 20rpx;
				border-top: 1rpx solid rgba(112, 112, 112, .1);
				.ti_item{
					margin-top: 30rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					text{
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: 400;
						&:first-child{
							color: #999999;
						}
						&:last-child{
							color: #333333;
						}
					}
				}
			}
		}
		
		.pay_detail{
			margin-top: 20rpx;
			.title{
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #333333;
			}
			.pd_total{
				margin-top: 20rpx;
				border-top: 1rpx solid rgba(112, 112, 112, .1);
				&>view{
					display: flex;
					align-items: center;
					justify-content: space-between;
				}
				.pdt_fwf{
					margin-top: 30rpx;
					text{
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: 400;
						&:first-child{
							color: #999999;
						}
						&:last-child{
							color: #333333;
						}
					}
				}
				.pdt_hj{
					margin-top: 24rpx;
					text{
						font-family: PingFang SC;
						&:first-child{
							font-size: 32rpx;
							font-weight: 400;
							color: #333333;
						}
						&:last-child{
							font-size: 40rpx;
							font-weight: 800;
							color: #FE401A;
						}
					}
				}
			}
		}
		
		.bottom{
			width: 100%;
			height: 180rpx;
			padding: 0 30rpx;
			background: #FFFFFF;
			box-shadow: 0rpx -1rpx 4rpx 1rpx rgba(0,0,0,0.06);
			box-sizing: border-box;
			position: fixed;
			bottom: 0;
			left: 0;
			z-index: 2;
			.btn{
				width: 100%;
				height: 88rpx;
				background: #007A69;
				border-radius: 50rpx;
				line-height: 88rpx;
				text-align: center;
				font-size: 32rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				letter-spacing: 2rpx;
				margin-top: 39rpx;
			}
		}
	}
</style>